import { Button, ButtonProps, Form } from "antd";
import { useState, useEffect } from "react";

interface FormSubmitButtonPropsType extends ButtonProps {
    text: string,
}

// 表单提交按钮
const FormSubmitButton = ({ size = 'large', type = 'primary', htmlType = 'submit', loading = false, block = false, text }: FormSubmitButtonPropsType) => {
    // 获取表单实例
    const form = Form.useFormInstance();

    // 监听数据变化触发表单验证，控制是否可提交
    const [disabled, setDisabled] = useState<boolean>(true);
    const formData = Form.useWatch([]);
    useEffect(() => {
        form.validateFields({ validateOnly: true }).then(() => setDisabled(false)).catch(() => setDisabled(true));
    }, [form, formData]);

    return (
        <Button {...{ size, type, htmlType, block, loading, disabled }}>{text}</Button>
    );
};

export default FormSubmitButton;